<!--
 * @Author: your name
 * @Date: 2020-06-29 14:06:23
 * @LastEditTime: 2020-07-06 15:47:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \JK商城\jkshopping\src\pages\payment\order\components\price.vue
--> 
<template>
  <div class="price">
    <div class="box">
      <div class="total">
        <span class="goods">商品金额</span>
        <span class="num">{{getSum() |toFixed | rmb}}</span>
      </div>
      <div class="freight">
        <span class="express">运费</span>
        <span class="num">+$12.0</span>
      </div>
      <div class="discount">
        <span class="coupon">优惠券抵扣</span>
        <span class="num">-$50.0</span>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('cartModule')
export default {
  data() {
    return {
      goodsList:[] //数据默认值
    };
  },
  computed: {
     //获取勾选的商品
    ...mapState(["isChecked"])
  },
  methods: {
     //计算总价钱
    getSum() {
      var sum = 0;
      for (var i in this.goodsList) {
        sum +=
          this.goodsList[i].price_original * this.goodsList[i].goods_number;
      }
     return sum
    },
  },
  activated() {
    this.goodsList = this.isChecked
  },
  
};
</script>

<style lang="scss" scoped>
.price {
  margin-top: 20px;
  .box {
    padding: 10px;
    box-sizing: border-box;
    .num {
      float: right;
      color: #ff0066;
    }
    .total {
      margin-bottom: 10px;

      .goods {
        color: rgb(141, 129, 129);
      }
    }
    .freight {
      margin-bottom: 10px;

      .express {
        color: rgb(141, 129, 129);
      }
    }
    .discount {
      margin-bottom: 10px;

      .coupon {
        color: rgb(141, 129, 129);
      }
    }
  }
}
</style>